<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter} from "vue-router";
import Paging from "@/views/system/component/paging.vue";
const currentPage4 = ref(4)
const pageSize4 = ref(120)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const router=useRouter()

const tableData = [
  {
    id:'123456',
    account:'123456(K三)',
    name:'保',
    role:'财务',
    describe:'\n' +
        '全面财多会计工作',
    adder:'张三',
    time:'2018-11-28 14:01:19'
  },
  {
    id:'',
    account:'',
    name:'',
    role:'',
    describe:'',
    adder:'',
    time:''
  },{
    id:'',
    account:'',
    name:'',
    role:'',
    describe:'',
    adder:'',
    time:''
  },
]
//删除事件
const deleteEvt = () => {
  ElMessageBox.confirm(
      '确认删除此账号吗？',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        icon:null,
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
      })
}
const adduser=()=>{
  console.log(111)
  router.push("/system/addAccount")
}

</script>

<template>
<div>
  <div style="margin: 10px">账号列表</div>
  <div class="listBox">
    <div>
      <el-button @click="adduser">添加用户</el-button>
    </div>

   <div class="mainBox">
     <div class="tables">

         <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#EEEEEE' ,border: '0.5px solid #DBDBDB'}" >
           <el-table-column prop="id" label="账号ID" />
           <el-table-column prop="account" label="账号"  />
           <el-table-column prop="name" label="姓名" />
           <el-table-column prop="role" label="绑定角色" />
           <el-table-column prop="describe" label="描述" />
           <el-table-column prop="adder" label="添加人" />
           <el-table-column prop="time" label="添加时间"  />
           <el-table-column fixed="right" label="操作" width="300" >
             <template #default style="display: flex">
               <el-button @click="edit" class="btn">编辑</el-button>
               <el-button @click="enable" class="btn">启用</el-button>

               <el-button @click="deleteEvt" class="btn">删除</el-button>
             </template>
           </el-table-column>
         </el-table>

     </div>
     <paging></paging>
   </div>



  </div>
</div>
</template>

<style scoped lang="scss">



.listBox{
  background-color: white;
  padding: 1.17rem;
  .el-button{
  margin-bottom: 20px;
}
}

.mainBox{
display: flex;
  flex-direction: column;


}
.btn{
  border: none;background-color: transparent;
  color: #64A68F;
}
.el-pagination{
  justify-content: flex-end;
}
.paging{
  justify-content: flex-end;
  align-content: flex-end;
  margin: 10px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
</style>